<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单布局</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body >
<div class="container-fluid">
    <h3>常规表单--字段与文本框垂直排列--文本框占满正行</h3>
    <div class="form">
        <ul class="col-md-12 list-unstyled">
            <li>
                <div class="form-group">
                    <label class="control-label">字段一</label>
                    <input type="text" class="form-control" data-original-title="" title="">
                </div>
            </li>
            <li>
                <div class="form-group">
                    <label class="control-label">字段二</label>
                    <input type="text" class="form-control" data-original-title="" title="">
                   
                </div>
            </li>
            <li>
                <div class="form-group">
                    <label class="control-label">字段三</label>
                    <input type="text" class="form-control" data-original-title="" title="">
                </div>
            </li>
        </ul>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;div class="form"&gt;
                    &lt;ul class="col-md-12 list-unstyled"&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="control-label"&gt;字段一&lt;/label&gt;
                                &lt;input type="text" class="form-control" data-original-title="" title=""&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="control-label"&gt;字段二&lt;/label&gt;
                                &lt;input type="text" class="form-control" data-original-title="" title=""&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="control-label"&gt;字段三&lt;/label&gt;
                                &lt;input type="text" class="form-control" data-original-title="" title=""&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
  	<hr />
	<h3>常规表单--字段垂直排列</h3>
    <p>常规表单字段标题与文本框合占一行</p>
    <div class="form-horizontal">
    	<ul class="col-md-12 list-unstyled">
        	<li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段一</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段二</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段三</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段四</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段五</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>...</li>
        </ul>
   </div>
   <h3>Code</h3>
   
   <div>
		<pre>
        	<code>
                &lt;!--创建表单--&gt;
                &lt;!--蓝色标记部分设定了字段与文本框按水平排列--&gt;
                &lt;div class="<font color="blue">form-horizontal</font>"&gt;
                    &lt;!--以下为表单内容--&gt;
                    &lt;!--每个LI 标签的开始至结束代表一个字段--&gt;
                    &lt;ul class="col-md-12 list-unstyled"&gt;
                    	&lt;!--字段一--&gt;
                        &lt;li&gt;
                            &lt;!--一个标题与文本框为一个组--&gt;
                            &lt;div class="form-group"&gt;
                                &lt;!--标题--&gt;
                                &lt;!--红色标记部分设定了文本框的宽度--&gt;
                                &lt;label class="<font  color="red">col-md-2</font> control-label"&lt;字段一&lt;/label&gt;
                                &lt;!--文本输入框--&gt;
                                &lt;div class="<font  color="red">col-md-4</font>"&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段二--&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="<font  color="red">col-md-2</font> control-label"&gt;字段二&lt;/label&gt;
                                &lt;div class="<font  color="red">col-md-4</font>"&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段三--&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="<font  color="red">col-md-2</font> control-label"&gt;字段三&lt;/label&gt;
                                &lt;div class="<font  color="red">col-md-4</font>"&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段四--&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="<font  color="red">col-md-2</font> control-label"&gt;字段四&lt;/label&gt;
                                &lt;div class="<font  color="red">col-md-4</font>"&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段五--&gt;
                        &lt;li>
                            &lt;div class="form-group"&gt;
                                &lt;label class="<font  color="red">col-md-2</font> control-label"&gt;字段五&lt;/label&gt;
                                &lt;div class="<font  color="red">col-md-4</font>"&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;...&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            </code>
        </pre>
   </div>
   <hr />
   <h3>常规表单--字段垂直排列--当中某个文本框跨列</h3>
   <div class="form-horizontal">
    	<ul class="col-md-12 list-unstyled">
        	<li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段一</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段二</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段三</label>
                	<div class="col-md-8"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段四</label>
                	<div class="col-md-8"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>
                <div class="form-group">
                	<label class="col-md-2 control-label">字段五</label>
                	<div class="col-md-4"><input type="text" class="form-control" data-original-title="" title=""></div>
       			</div>
            </li>
            <li>...</li>
        </ul>
   </div>
   <h3>Code</h3>
   <div>
		<pre>
        	<code>
                &lt;!--创建表单--&gt;
                &lt;div class="form-horizontal"&gt;
                    &lt;!--以下为表单内容--&gt;
                    &lt;!--每个LI 标签的开始至结束代表一个字段--&gt;
                    &lt;ul class="col-md-12 list-unstyled"&gt;
                        &lt;!--字段一--&gt;
                        &lt;li&gt;
                            &lt;!--一个标题与文本框为一个组--&gt;
                            &lt;div class="form-group"&gt;;
                                &lt;!--标题--&gt;
                                &lt;label class="col-md-2 control-label"&lt;字段一&lt;/label&gt;
                                &lt;!--文本输入框--&gt;
                                &lt;div <font color="red">class="col-md-4"</font>&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段二--&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="col-md-2 control-label"&gt;字段二&lt;/label&gt;
                                &lt;div <font color="red">class="col-md-4"</font>&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段三--&gt;
                        &lt;li&gt;
                             <span style="background-color:#9F6;">&lt;div class="form-group"&gt;
                                &lt;label class="col-md-2 control-label"&gt;字段三&lt;/label&gt;
                                &lt;!--此字段的文本框宽度等于上一个字段的2倍--&gt;
                                &lt;!--关键看红色标记部分--&gt;
                                &lt;div <font color="red">class="col-md-8"</font>&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;</span>
                        &lt;/li&gt;
                        &lt;!--字段四--&gt;
                        &lt;li&gt;
                            &lt;div class="form-group"&gt;
                                &lt;label class="col-md-2 control-label"&gt;字段四&lt;/label&gt;
                                &lt;div <font color="red">class="col-md-8"</font>&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;!--字段五--&gt;
                        &lt;li>
                            &lt;div class="form-group"&gt;
                                &lt;label class="col-md-2 control-label"&gt;字段五&lt;/label&gt;
                                &lt;div <font color="red">class="col-md-4"</font>&gt;&lt;input type="text" class="form-control" data-original-title="" title=""&gt;&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;...&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            </code>
        </pre>
   </div>
   <hr />
   <h3>流式排列--字段从左至右排列</h3>
   <p>字段从左至右排列满一行自动换行</p>
   <div class="form-horizontal">
    	<ul class="col-md-12 list-unstyled">
        	<li class="col-md-4">
                <div class="form-group">
                    <label class="col-md-3 control-label">字段一</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </li>
            <li class="col-md-4">
                <div class="form-group">
                    <label class="col-md-3 control-label">字段二</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </li>
            <li class="col-md-4">
                <div class="form-group">
                    <label class="col-md-3 control-label">字段三</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </li>
            <li class="col-md-4">
                <div class="form-group">
                    <label class="col-md-3 control-label">字段四</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </li>
            <li class="col-md-4">
                <div class="form-group">
                    <label class="col-md-3 control-label">字段五</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </li>
            
        </ul>
   </div>
   <h3>Code</h3>
   <div>
   	<pre>
    	<code>
            &lt;div class="form-horizontal"&gt;
                &lt;ul class="col-md-12 list-unstyled"&gt;
                    &lt;li class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label class="col-md-3 control-label">字段一&lt;/label&gt;
                            &lt;div class="col-md-9"&gt;
                                &lt;input type="text" class="form-control" /&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label class="col-md-3 control-label"&gt;字段二&lt;/label&gt;
                            &lt;div class="col-md-9"&gt;
                                &lt;input type="text" class="form-control" /&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label class="col-md-3 control-label">字段三&lt;/label&gt;
                            &lt;div class="col-md-9"&gt;
                                &lt;input type="text" class="form-control" /&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label class="col-md-3 control-label"&gt;字段四&lt;/label&gt;
                            &lt;div class="col-md-9"&gt;
                                &lt;input type="text" class="form-control" /&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label class="col-md-3 control-label"&gt;字段五&lt;/label&gt;
                            &lt;div class="col-md-9"&gt;
                                &lt;input type="text" class="form-control" /&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    
                &lt;/ul&gt;
            &lt;/div&gt;
        </code>
    </pre>
   </div>
   
</div>

</body>
</html>
